<style scoped>
  #chart {
    width: 100%;
    height: 350px;
    margin-top: -40px;
  }

  .card-padding {
    padding: 10px;
  }

  .flex-station {
    border-radius: 4px;
    font-size: 16px;
    background-clip: padding-box;
  }

  .flex-time {
    font-size: 12px;
    background-clip: padding-box;
    color: #999999;
    float: right;
  }

  .blue-button {
     float: right;
     padding: 2px 2px;
     border-radius: 4px;
     font-size: 14px;
     white-space: nowrap;
   }

  .my-flexBox {
    line-height: 30px;
  }
  .alarm-color{
    color: #f15a4a;
  }

</style>


<template>
  <div>
    <!--<tab></tab>-->


    <!--报警信息-->
    <card :header="{title:alarmInformation}">
      <div slot="content" class="card-padding">
        <flexbox class="my-flexBox">
          <flexbox-item>
            <div class="flex-station">嘉兴佳通加气站</div>
          </flexbox-item>
          <flexbox-item>
            <div class="flex-time">2017.12.05 17:32:12</div>
          </flexbox-item>
        </flexbox>
        <flexbox>
          <flexbox-item :span="8"><p>报警因子：储罐压力过大</p>
            <p>报警值：1.5（参考值：0.8~1.2）</p></flexbox-item>
          <flexbox-item>
            <div class="blue-button" @click="selectAlarm()">查看更多</div>
          </flexbox-item>
        </flexbox>

      </div>
    </card>
    <!--实时数据-->
    <card :header="{title:realData}">
      <div slot="content">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr>
            <th>站点名称</th>
            <th>储罐压力</th>
            <th>储罐液位</th>
            <th>连接</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr @click="showRealData()">
            <td>XXX加气站</td>
            <td>0.74</td>
            <td>8.54</td>
            <td>在线</td>
            <td>
              <i class="icon icon-circle green-icon"></i>
            </td>
          </tr>
          <tr>
            <td>XXX加气站</td>
            <td>0.74</td>
            <td class="alarm-color">10.54</td>
            <td>在线</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>XXX加气站</td>
            <td>0.74</td>
            <td>8.54</td>
            <td>在线</td>
            <td>
              <i class="icon icon-circle green-icon"></i>
            </td>
          </tr>
          <tr>
            <td>XXX加气站</td>
            <td>0.74</td>
            <td class="alarm-color">10.54</td>
            <td>在线</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          </tbody>
        </x-table>
      </div>
    </card>
    <!--站点统计-->
    <card :header="{title:stationStatistics}">
      <div slot="content">
        <div id="chart"></div>
      </div>
    </card>


  </div>


</template>
<script>
  import {
    ViewBox,
    XTable,
    Cell,
    Group,
    XInput,
    Popup,
    PopupPicker,
    Picker,


    Divider,
    Card,
    Flexbox,
    FlexboxItem


  } from 'vux'
  import tab from '@/components/monitor/public/tab';


  import * as echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';
  export default {
    mounted() {
      //this.getList();
      this.initChart()
    },
    components: {
      tab,
      Divider,
      Card,
      Flexbox,
      FlexboxItem,


      ViewBox,
      XTable,
      Cell,
      Group,
      XInput,
      Popup,
      PopupPicker,
      Picker


    },
    data() {
      return {
        alarmInformation: '报警信息',
        realData: '实时数据',
        stationStatistics: '站点统计',
      }
    },
    methods: {
      initChart(){
        let $this = this;
        $this.option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['在线站点', '离线站点', '报警数', '总站点数'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '消耗量 ',
              type: 'bar',
              barWidth: '60%',
              data: [200, 134, 200, 334]
            }
          ]
        };

        var echartsOne = document.getElementById('chart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.option);
      },
      showRealData(){
        this.$router.push({
          name: 'realData',
          /*query: {id: 11}*/
        });
      },
      selectAlarm(){
        this.$router.push({
          name: 'alarmInformation',
          /*query: {id: 11}*/
        });
      }
    }

  }
</script>


